<!--口罩机分类管理-->
<template>
  <div class="recordContainer">
    <div class="recordLeft">
      <el-scrollbar style="height: 100%;">
        <p class="Toptitle">
          <img src="../../../static/image/record_title.png" alt width="10" height="16" />
          <span>设备列表</span>
        </p>
        <p class="searchp">
          <el-input placeholder="检索 产品设备名称" v-model="filterText" clearable class="searchinpt"></el-input>
        </p>
        <!--设备列表-->
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree"
        ></el-tree>
      </el-scrollbar>
    </div>

    <div class="recordRight">
      <div class="recordRight_Top">
        <p class="Toptitle">
          <img src="../../../static/image/content_title.png" alt width="20" height="16" />
          <span>产量、产能</span>
        </p>
      </div>
      <div class="recordRight_Bottom">
        <el-scrollbar style="height: 100%;">
          <p class="Toptitle">
            <img src="../../../static/image/content_title.png" alt width="20" height="16" />
            <span>产量报表</span>
          </p>
          <ul class="year_ul">
            <li
              class="year_li"
              v-for="(item, index) in navList"
              :key="index"
              :class="{ current: tabCurrentIndex === index }"
              @click="tabClick(index,item.state)"
            >{{item.text}}</li>
          </ul>
          <div class="operator_content">
            <p class="searchp">
              <el-input placeholder="请输入内容" v-model="searxh" clearable class="searchinpt"></el-input>
              <el-input placeholder="请输入内容" v-model="searxh" clearable class="searchinpt"></el-input>
              <el-button class="searchadd">导出</el-button>
            </p>
            <!--表格 :cell-style="{background:'#00295E',color:'#fff'}"-->
            <el-table
              :data="tableData"
              style="width: 100%"
              :header-cell-style="{background:'#003983',color:'#fff'}"
            >
              <el-table-column prop="name" label="口罩机制造商名称"></el-table-column>
              <el-table-column prop="address" label="口罩机制造商地址"></el-table-column>
              <el-table-column prop="address" label="联系人姓名"></el-table-column>
              <el-table-column prop="address" label="联系人电话"></el-table-column>
              <el-table-column prop="address" label="联系人邮箱"></el-table-column>
              <el-table-column prop="address" label="创建时间"></el-table-column>
              <el-table-column label="操作" prop="do">
                <template>
                  <button size="small" class="commonbut editbut">修改</button>
                  <button size="small" class="commonbut deletebut">删除</button>
                </template>
              </el-table-column>
            </el-table>
            <!--分页-->
            <div class="pageright">
              <el-pagination
                :current-page="page"
                :page-size="size"
                :page-sizes="sizes"
                :total="sum"
                @current-change="currChange"
                @size-change="sizeChange"
                layout="total, sizes, prev, pager, next, jumper"
              />
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  },

  data() {
    return {
      filterText: "",
      //树形菜单
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      //年月日选择
      tabCurrentIndex: 0,
      navList: [
        {
          state: 0,
          text: "年"
        },
        {
          state: 1,
          text: "月"
        },
        {
          state: 2,
          text: "日"
        }
      ],
      //表格
      searxh: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      page: 1,
      size: 5,
      sizes: [5, 10, 20, 30, 50],
      orderType: "asc",
      sum: 0
    };
  },
  methods: {
    tabClick(index, state) {
      this.tabCurrentIndex = index;
    },
    /**
     * 分页事件
     */
    currChange(curr) {
      // page页改变触发事件
      this.loading = true;
      this.page = curr;
      // this.initTable();
    },
    sizeChange(curr) {
      this.size = curr;
      // this.initTable();
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/operator";
.recordContainer {
  width: 100%;
  height: 100%;

  display: flex;
  border: 1px solid #f00;
  box-sizing: border-box;
  .recordLeft {
    width: 264px;
    height: 100%;
    box-shadow: 0px 0px 25px 0px rgba(68, 140, 232, 0.7) inset;
    margin-right: 10px;
    padding-top: 15px;
    box-sizing: border-box;
    .Toptitle {
      padding-left: 15px;
      box-sizing: border-box;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(0, 232, 255, 1);
      margin-bottom: 25px;
      img {
        vertical-align: middle;
      }
    }
    .searchp {
      margin: 15px 0;
      padding-left: 19px;
      box-sizing: border-box;
      .searchinpt {
        width: 226px;
        height: 30px !important;
        background: rgba(0, 41, 94, 1);
        border: 1px solid rgba(11, 91, 167, 1);
        box-shadow: 0px 0px 8px 0px rgba(15, 128, 208, 0.75) inset;
        background: transparent !important;
        margin-right: 10px;
        color: #fff !important;
      }

      /deep/.el-input__inner {
        background: transparent !important;
        height: 30px !important;
        border: none;
      }
    }
  }
  .recordRight {
    width: 100%;
    height: 100%;
    color: #fff;
    .recordRight_Top {
      width: 100%;
      height: 353px;
      box-shadow: 0px 0px 25px 0px rgba(68, 140, 232, 0.7) inset;
      padding: 16px 0 0 16px;
      box-sizing: border-box;
      margin-bottom: 10px;
      .Toptitle {
        box-sizing: border-box;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(0, 232, 255, 1);
        margin-bottom: 25px;
        img {
          vertical-align: middle;
        }
      }
    }
    .recordRight_Bottom {
      width: 100%;
      height: calc(100% - 363px);
      border: 1px solid green;
      box-sizing: border-box;
      box-shadow: 0px 0px 25px 0px rgba(68, 140, 232, 0.7) inset;
      padding: 16px 0 0 0;
      .Toptitle {
        padding-left: 16px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(0, 232, 255, 1);
        margin-bottom: 15px;
        img {
          vertical-align: middle;
        }
      }
      .year_ul {
        width: 100%;
        border-bottom: 1px solid #08498d;
        padding-left: 26px;
        display: flex;
        .year_li {
          width: 62px;
          height: 25px;
          background: #0048a9;
          border-radius: 3px 3px 0 0;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          margin-right: 1px;
        }
        .current {
          background: rgba(69, 189, 227, 1);
        }
      }
    }
  }
}
/**滚动条 */
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}
/deep/.el-scrollbar__view {
  height: 100%;
}
/**树形菜单 */
.el-tree {
  background: transparent;
  color: #fff;
}
// /deep/.el-tree-node__expand-icon{
//   color: #00a4bf;
// }

/deep/.el-tree-node__content {
  height: 45px;
  border-bottom: 1px solid #0B5BA7;
}
/deep/.el-tree-node:focus > .el-tree-node__content {
  background: #45bde3;
}
/deep/.el-tree-node__content:hover {
  background: #45bde3;
}
</style>